<template>
  <div class="index">
    <!-- model 双向绑定：哪一个下标的频道处于活动状态 activeIndex -->
    <van-tabs v-model='activeIndex'>
  <van-tab v-for="channels in channel"
  :key='channels.id'
  :title="channels.name">
  <!-- 应用组件 传递子组件参数 -->
 <article-list @showMoreAction="hsShowMoreAction" :channels="channels"> </article-list>
  </van-tab>
</van-tabs>
     <div class='bar-btn' @click='showChannelEdit=true'>
      <!-- <van-icon name=''/> -->
     </div>
    <!-- 文章--更多操作 -->
    <van-popup v-model="showMoreAction" :style="{ width: '80%' }">
    <!-- 弹层组件显示
     @dislike='hDislike' 在子组件监听不感兴趣
     @report='hReport' 触发举报内容
     -->
      <more-action
      ref='refMoreAction'
      @report='hReport'
      @dislike='hDislike' ></more-action>
    </van-popup>
  </div>
</template>

<script>
// 获取频道01 引入获取频道封装好的方法 dislikeArticle
import { getChannels } from '@/api/channel.js'
// 导入不感兴趣（删除）文章方法
import { dislikeArticle, reportArticle } from '@/api/artice.js'
import MoreAction from './moreAction'
// 引入组件
import ArticleList from './articeList'
export default {
//  弹框注册组件
  components: {
    ArticleList,
    MoreAction
  },
  data () {
    return {
      activeIndex: 0, // 当前tabs中，处于活动状态的是哪一个下标 activeIndex
      articeId: null, // 当前要执行更多操作的 文章编号
      // 获取频道02 准备数据项
      channel: [],
      // 弹层组件是否显示
      showMoreAction: false
    }
  },
  created () {
    this.loadChannel()
  },
  methods: {
    // 获取频道03 发送请求，把频道列表保存channel中
    async loadChannel () {
      try {
        const result = await getChannels()
        console.log(result)
        this.channel = result.data.data.channels
      } catch (err) {
        console.log(err);
      }
    },
    // 点击显示弹层  传递文章id
    hsShowMoreAction (articeid) {
      this.showMoreAction = true
      // 赋值当前文章id  保存
      this.articeId = articeid
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
    },
    // 处理用户在弹层中选择点击不感兴趣
    async hDislike () {
      // 1、调用接口
      console.log(this.articeId);
      const result = await dislikeArticle(this.articeId)
      console.log(result)
      // 2、退出弹层
      this.showMoreAction = false
      console.log('我要被删掉');
      // 3、把用户点击的当前文章删除
      // 通过实践总线去发布一个消息，告诉articleList组件， 去删除对应的文章
      // 参数是： 当前要删除的文章编号及当前的频道编号 articeId
      const eventObj = {
        articeId: this.articeId,
        channelId: this.channel[this.activeIndex].id
      }
      console.log(eventObj);
      this.$eventBus.$emit('delArticle', eventObj)
    },
    // 触发举报内容
    async hReport (reportTypeId) {
      console.log(reportTypeId);
      // 1、调用接口
      const result = await reportArticle(this.articeId, reportTypeId)
      console.log(result);
      // 2、关闭弹层
      this.showMoreAction = false
      // 3、删除文章
      const eventObj = {
        articeId: this.articeId,
        channelId: this.channel[this.activeIndex].id
      }
      console.log(eventObj);
      this.$eventBus.$emit('delArticle', eventObj)
    }
  }
}
</script>

<style>

</style>
